<!DOCTYPE html>
<html lang="sr">
<head>
<meta charset="utf-8" />
<title>Slajdovi</title>
<style type="text/css">
 h1 {background-color: silver;}
 span {background-color: olive;}
 .slide {display: none;}
 .show {display: block;}
 div.body {background-color: aqua;}
 span, svg {position: absolute; right: 5px;}
 p       { opacity:0.6; filter:alpha(opacity=60); }
 p:hover { opacity:1;   filter:alpha(opacity=100);}
 q:lang(sr) { quotes: "„" "”"; }
</style>
<script type="text/javascript">

 var elm

 function show(id) {
  var txt = document.getElementById('status').firstChild
  if( txt.textContent ) txt.textContent = "#"+id
  if( txt.text ) txt.text = "#"+id
  if(elm) elm.className = 'slide'
  elm = document.getElementById(id)
  if(elm) elm.className = 'show'
 }

 function keypress(e) {
  show( String.fromCharCode(e.which || e.keyCode) )
 } 

</script>
</head>
<body onkeypress = "keypress(event)">

<span id="status">Press slide id to choose a slide.</span>

<div class="slide" id="1">
 <h1>Наслов слајда 1</h1>
<svg>
  <polygon points="200,10 250,190 160,210"
  style="fill:#cccccc;stroke:#000000;stroke-width:1" />
</svg>
 <p>Текст на слајду 1. Текст на слајду 1. Текст на слајду 1. Текст на слајду 1. </p>
 <p>Текст на слајду 1. Текст на слајду 1. Текст на слајду 1. Текст на слајду 1. </p>
 <p>Текст на слајду 1. Текст на слајду 1. Текст на слајду 1. Текст на слајду 1. </p>
 <p>The 17 standard colors are: aqua, black, blue, fuchsia, gray, grey, green,
 lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.</p>
</div>

<div class="slide" id="2">
 <h1>Наслов слајда 2</h1>
 <svg width="320" height="240"
   onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
   onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">
  <rect x="5" y="5" width="160" height="120" stroke="green" fill="lightblue" />
  <rect x="155" y="115" width="160" height="120" stroke="blue" fill="lightgreen" />
  <circle cx="160" cy="120" r="60" stroke="maroon" fill="gold" />
 </svg>
 <div class="body">
 <p>Текст на слајду 2. Текст на слајду 2. Текст на слајду 2. Текст на слајду 2. </p>
 <p>Текст на слајду 2. Текст на слајду 2. Текст на слајду 2. Текст на слајду 2. </p>
 <p>Текст на слајду 2. Текст на слајду 2. Текст на слајду 2. Текст на слајду 2. </p>
 <p>Текст на слајду 2. Текст на слајду 2. Текст на слајду 2. Текст на слајду 2. </p>
 <p>Some text <q lang="sr">A quote in a paragraph</q> Some text.</p>
 <p>Some text <q>A quote in a paragraph</q> Some text.</p>
 </div>
</div>

</body>
</html>